/**
* ============================================
* @author:syf20020816@outlook.com
* @since:20230905
* @version:0.0.1
* @type:interface
* @description: 
* # SIcon
* this is a icon container, better than Image
* ## properties:
* - in property <MouseCursor> mouse-cursor : mouse cursor of the icon
* - in property <Themes> theme : SurrealismUI themes
* - in property <image> source : icon source
* - in-out property <brush> colorize : icon color
* - in property <ImageFit> image-fit : icon image fit
* - in property <ImageRendering> image-rendering : image rendering
* - in-out property <RotationProps> rotation : image rotation 
* - in property <int> source-clip-x : icon clip x
* - in property <int> source-clip-y : icon clip y
* - in property <int> source-clip-height : icon clip height
* - in property <int> source-clip-width : icon clip width
* - out property <bool> has-hover : icon has hover
* ## functions
* - pure public function get-colorize()->brush : get icon color
* ## callbacks: 
* - callback clicked : run if you click the icon
* ============================================
*/
import {ROOT_STYLES,DefaultSIconProps} from "../../themes/index.slint";
import {Themes,RotationProps,UseSurrealismFn,ColorLevel} from "../../use/index.slint";

export component Icon{
  //image props
  in property <MouseCursor> mouse-cursor : DefaultSIconProps.mouse-cursor;
  in property <Themes> theme : DefaultSIconProps.theme;
  in property <image> source : DefaultSIconProps.source;
  in-out property <brush> colorize;
  in property <ImageFit> image-fit : DefaultSIconProps.image-fit;
  in property <ImageRendering> image-rendering : DefaultSIconProps.image-rendering;
  in-out property <RotationProps> rotation : DefaultSIconProps.rotation;
  in property <int> source-clip-x : DefaultSIconProps.source-clip-x;
  in property <int> source-clip-y : DefaultSIconProps.source-clip-y;
  in property <int> source-clip-height: source.height - source-clip-y;
  in property <int> source-clip-width: source.width - source-clip-x;
  out property <bool> has-hover <=> area.has-hover;
  out property <bool> pressed <=> area.pressed;
  pure public function get-colorize()->brush {
      return UseSurrealismFn.get-color(root.theme , ColorLevel.Font);
  }
  // get icon src from for iter item
  callback clicked;
  callback moved;
  //default icon size
  padding: DefaultSIconProps.padding;
  height: DefaultSIconProps.height;
  width: DefaultSIconProps.width;
  states [
    hover when area.has-hover: {
        inner.colorize : colorize.brighter(0.2);
    }
  ]
  area:=TouchArea {
    mouse-cursor: root.mouse-cursor;
    inner:=Image{
      source : root.source;
      colorize : root.colorize;
      image-fit : root.image-fit;
      image-rendering : root.image-rendering;
      rotation-angle: root.rotation.rotation-angle;
      rotation-origin-x: root.rotation.rotation-origin-x;
      rotation-origin-y: root.rotation.rotation-origin-y;
      source-clip-height: root.source-clip-height;
      source-clip-width: root.source-clip-width;
      source-clip-x: root.source-clip-x;
      source-clip-y: root.source-clip-y;
      height: root.height;
      width: root.width;
      animate rotation-angle {
        easing: ROOT-STYLES.sur-an-easing;
        duration: ROOT-STYLES.sur-an-duration;
      }
    }
    clicked => {
      root.clicked();
    }
    moved => {
      root.moved();
    }
  }
}
